<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ include file="/inc.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>善定制 - 填写信息</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<!-- Bootstrap -->
		<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css" />
		<!-- style -->
		<link href="<%=basePath%>css/home.css" rel="stylesheet" />
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	</head>
	<body>
		<div class="alert alert-danger" role="alert" id="error"
			style="display: none">
			<i class="fa fa-exclamation-triangle"></i>22
		</div>
		<form class="form-horizontal" id="form"
			action="<%=basePath%>public/stlyeAction!go.action" method="post"
			encType="multipart/form-data">
			<s:hidden name="stlye_id"></s:hidden>
			<s:hidden name="btn_id"></s:hidden>
			<s:hidden name="sign"></s:hidden>
			<s:hidden name="cloth_id"></s:hidden>
			<s:hidden name="images1"></s:hidden>
			<s:hidden name="images2"></s:hidden>
			<div class="container-fluid">
				<div class="wrap graybg">
					<s:if test='error != null'>
						<div class="error">
							<div class="alert alert-danger" role="alert">
								<i class="fa fa-exclamation-triangle"></i>
								<s:property value="error" />
							</div>
						</div>
						<!--E .error-->
					</s:if>
					<div class="photo">
						<h3>
							添加照片
						</h3>
						<div id="photo1">
							<div class="block bg1">
								<a href="##" data-toggle="modal" data-target="#myModal1"
									id="photo1">
									<div class="imgbox" id="imgbox1">
										<s:if test="images1!=null && images1!=''">
											<i class="fa fa-times-circle closed"></i>
											<img
												src="<%=basePath%>userimages/<s:property value="images1" />"
												alt="">
										</s:if>
									</div> </a>
							</div>
						</div>
						<div id="photo2">
							<div class="block bg2">
								<a href="##" data-toggle="modal" data-target="#myModal2"
									id="photo2">
									<div class="imgbox" id="imgbox2">
										<s:if test="images2!=null && images2!=''">
											<i class="fa fa-times-circle closed"></i>
											<img
												src="<%=basePath%>userimages/<s:property value="images2" />"
												alt="">
										</s:if>
									</div> </a>
							</div>
						</div>
					</div>
					<!--E .photo-->

					<!-- 弹窗 -->
					<div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
						aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-body">
									<button type="button" class="btn btn-choose btn-block" id="chooseImage">
										从手机中选择文件
									</button>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-primary btn-block"
										id="uploadImage">
										上传
									</button>
									<button type="button" class="btn btn-no btn-block"
										data-dismiss="modal">
										取消
									</button>
								</div>

							</div>
						</div>
					</div>

					<!-- 弹窗 -->
					<div class="modal fade" id="myModal2" tabindex="-1" role="dialog"
						aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">

								<div class="modal-body">
									<button type="button" class="close" data-dismiss="modal">
										<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
									</button>
									<div>
										<input id="fileupload" type="file" name="file2"
											class="btn btn-default" />

									</div>
								</div>
								<div class="modal-footer">
									<button type="button" onclick="go('2')"
										class="btn btn-primary btn-block">
										上传照片
									</button>
									<button type="button" class="btn btn-no btn-block"
										data-dismiss="modal">
										取消
									</button>
								</div>


							</div>
						</div>
					</div>

					<div class="clearfix"></div>
					<div class="choose">
						<div class="row">
							<div class="col-xs-4">
								<s:select id="height" cssClass="form-control" name="height"
									list="#{'身高':'身高','160CM':'160CM','170CM':'170CM','180CM':'180CM','190CM':'190CM'}"
									listKey="key" listValue="value" value="height" />
							</div>
							<div class="col-xs-4">
								<s:select id="weight" cssClass="form-control" name="weight"
									list="#{'体重':'体重','50KG':'50KG','60KG':'60KG','70KG':'70KG','80KG':'80KG'}"
									listKey="key" listValue="value" value="weight" />
							</div>
							<div class="col-xs-4">

								<s:select id="size" cssClass="form-control" name="size"
									list="#{
								'常穿型号':'常穿型号',
								'XZ':'--西装--',
								'XZ38':'38',
								'XZ38.5':'38.5',
								'XZ39':'39',
								'XZ39.5':'39.5',
								'XZ40':'40',
								'XZ40.5':'40.5',
								'XZ41':'41',
								'XZ41.5':'41.5',
								'XZ42':'42',
								'XZ42.5':'42.5',
								'CS':'--衬衫--',
								'CS42':'42',
								'CS43':'43',
								'CS43.5':'43.5',
								'CS44':'44',
								'CS46':'46',
								'CS48':'48',
								'CS50':'50',
								'CS52':'52',
								'CS54':'54',
								'CS56':'56',
								'CS58':'58'}"
									listKey="key" listValue="value" value="size" />

							</div>
						</div>
						<div class="check-box">
							<label class="checkbox-inline">
								<s:checkbox id="call" name="call" value="call" />
								电话沟通
							</label>
							<label class="checkbox-inline">
								<s:checkbox id="trade_in" name="trade_in" value="trade_in" />
								微信沟通
							</label>
						</div>
						<!--E .check-box-->
					</div>
					<!--E .choose-->
					<div class="style">
						<h4>
							选择款式
						</h4>
						<div class="row" id="style_div">
							<s:iterator value="page.elements" status="stat">
								<div class="col-xs-4">
									<a href="javascript:void(0);"
										onclick="selected_style('<s:property value="id" />')"><img
											src="<%=basePath_org%><s:property value="img" />" alt="" />
									</a>
								</div>
								<!--选中状态在-->
							</s:iterator>
						</div>
					</div>
					<!--E .style-->
					<div class="style">
						<h4>
							选择纽扣
						</h4>
						<div class="row" id="button_div">
							<s:iterator value="page2.elements" status="stat">
								<div class="col-xs-3">
									<a href="javascript:void(0);"
										onclick="selected_btn('<s:property value="id" />')"><img
											src="<%=basePath_org%><s:property value="img" />" alt="" />
									</a>
								</div>
								<!--选中状态在-->
							</s:iterator>
						</div>
					</div>
					<!--E .style-->
					<p style="margin-top: 5px; color: #aaa; padding-bottom: 60px;">
						增加一段 服务保障的文字 ，以打消客户下单的顾虑增加一段 服务保障的文字 ，以打消客户下单的顾虑增加一段 服务保障的文字
						，以打消客户下单的顾虑
					</p>
					<button type="button" onclick="go('3')"
						class="btn btn-org btn-lg btn-block navbar-fixed-bottom">
						马上定制
					</button>
				</div>
				<!--E .wrap-->

			</div>
		</form>



		<script src="<%=basePath%>js/jquery-1.10.1.min.js"></script>
		<script src="<%=basePath%>js/bootstrap.min.js"></script>
		<script src="<%=basePath%>js/detail.js"></script>
		<script type="text/javascript">
      $('#myModal,myModal1').modal(options)
    </script>
		<script>
function checkForm(){
	var len_imgbox1 = $('#imgbox1').find('img').length;
	if(len_imgbox1 > 0){
	
	}else{
		$('#error').css("display","none");
		$('#error').text("请选择正面照片!");
		$('#error').css("display","block");
        //return false;
	}
	
	var len_imgbox2 = $('#imgbox2').find('img').length;
	if(len_imgbox2 > 0){
	
	}else{
		$('#error').css("display","none");
		$('#error').text("请选择背面照片!");
		$('#error').css("display","block");
       // return false;
	}
	
	if($("#height").val() != "身高"){
		
	}else{
		$('#error').css("display","none");
		$('#error').text("请选择身高!");
		$('#error').css("display","block");
		 return false;
	}
	
	if($("#weight").val() != "体重"){
		
	}else{
		$('#error').css("display","none");
		$('#error').text("请选择体重!");
		$('#error').css("display","block");
		 return false;
	}
	
	if($("#size").val() != "常穿型号" && $("#size").val() != "CS" && $("#size").val() != "XZ"){
		
	}else{
		$('#error').css("display","none");
		$('#error').text("请选择常穿型号!");
		$('#error').css("display","block");
		 return false;
	}
	
	  var selFlag = false;
	  $("input[type='checkbox']").each(function(){
	  	var sel = $(this).attr("name");
	  	if(document.getElementById(sel).checked == true){
	  		selFlag = true;
	  	}
     });
     if(selFlag){
     
     }else{
		$('#error').css("display","none");
		$('#error').text("电话或者微信沟通至少选择一种!");
		$('#error').css("display","block");
		 return false;
     }
     
	var style_div = $('#style_div').find("a[class='active']").length;
	if(style_div > 0){
	
	}else{
		$('#error').css("display","none");
		$('#error').text("请选择款式!");
		$('#error').css("display","block");
         return false;
	}
	
	var button_div = $('#button_div').find("a[class='active']").length;
	if(button_div > 0){
	
	}else{
		$('#error').css("display","none");
		$('#error').text("请选择纽扣!");
		$('#error').css("display","block");
         return false;
	}
	return true;
}

function go(sign) {		
	   	$('#sign').val(sign);
		if(sign == '3'){
			if(checkForm()){
				$('#form').submit();
			}else{
				var t = $('#error').offset().top;
     					$(window).scrollTop(t);
			}
		}else{
			$('#form').submit();
		}	
		
}



function selected_style(value) {
	   	$('#stlye_id').val(value);
}

function selected_btn(value) {
	   	$('#btn_id').val(value);
}
function _wxCall() {
	var sel = $(this).attr("id");
	if(document.getElementById(sel).checked == true){
		alert("选中微信");		
 		window.location.href ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6e3f16241d2c490d&redirect_uri=http://www.shinner.cn/root/public/orderAction!userAuthView.action&response_type=code&scope=snsapi_userinfo&state=userAuth#wechat_redirect";
	}else{
		alert("no选中微信");
	}
	   
}
$(document).ready(function() {
		//$("#trade_in").bind("click",_wxCall);

});
</script>
		<script>
  /*
   * 注意：
   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 如有问题请通过以下渠道反馈：
   * 邮箱地址：weixin-open@qq.com
   * 邮件主题：【微信JS-SDK反馈】具体问题
   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
   */
  var temp = eval(${jsAPI});  
  wx.config({
	debug: true,
	appId: temp.appId,
	timestamp: temp.timestamp,
	nonceStr: temp.noncestr,
	signature: temp.signature,
	jsApiList: [
		'checkJsApi',
		'onMenuShareTimeline',
		'onMenuShareAppMessage',
		'onMenuShareQQ',
		'onMenuShareWeibo',
		'hideMenuItems',
		'showMenuItems',
		'hideAllNonBaseMenuItem',
		'showAllNonBaseMenuItem',
		'translateVoice',
		'startRecord',
		'stopRecord',
		'onRecordEnd',
		'playVoice',
		'pauseVoice',
		'stopVoice',
		'uploadVoice',
		'downloadVoice',
		'chooseImage',
		'previewImage',
		'uploadImage',
		'downloadImage',
		'getNetworkType',
		'openLocation',
		'getLocation',
		'hideOptionMenu',
		'showOptionMenu',
		'closeWindow',
		'scanQRCode',
		'chooseWXPay',
		'openProductSpecificView',
		'addCard',
		'chooseCard',
		'openCard'
	  ]
  });
</script>

		<script>
wx.ready(function () {
 
// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
wx.checkJsApi({
      jsApiList: [
        'chooseImage',
        'previewImage'
      ],
      success: function (res) {
       // alert(JSON.stringify(res));
      }
    });

  // 5 图片接口
  // 5.1 拍照、本地选图
  var images = {
    localId: [],
    serverId: []
  };
  
  $("#chooseImage").bind("click",function () {

    wx.chooseImage({
      success: function (res) {
        images.localId = res.localIds;
        alert('已选择 ' + res.localIds.length + ' 张图片');
         $("#imgbox1").html("<img src='"+res.localIds+"' />"); 
      }
    });
  });
  
  $("#uploadImage").bind("click",function () {
 if (images.localId.length == 0) {
      alert('请先使用 chooseImage 接口选择图片');
      return;
    }
    var i = 0, length = images.localId.length;
    images.serverId = [];
    function upload() {
      wx.uploadImage({
        localId: images.localId[i],
        success: function (res) {
          i++;
          alert('已上传：' + i + '/' + length);
          images.serverId.push(res.serverId);
          if (i < length) {
            upload();
          }
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    }
    upload();
  });


  


});

wx.error(function (res) {
  alert(res.errMsg);
});
</script>
	</body>
</html>